// input 日期选择框
#dwz-calendar {
	.box-shadow;
	.full-fixed;
	.flex-all-center;
	background: @maskBg;
	z-index: 1100;
	.calendar {
		width: 300px;

		// input 日期选择框 底部工具栏
		.df {
			display: flex;
			.button {
				margin: 10px;
			}
		}
	}
}

input.dwz-calendar {
	background: url(../../image/icon/calendar/icon-calendar.svg) no-repeat right center;
	background-size: 16px;
}

.calendar {
	.box-line;
	overflow: hidden;
	min-width: 240px;
	position: relative;
	background: #fff;
	a {
		color: #000;
	}

	.dt {
		.b-line;
		display: flex;
		align-items: center;
		height: 40px;
		background-color: #fff;
		background-repeat: repeat-x;
		position: relative;
		.ym {
			padding: 10px 23px;
			text-align: center;
			font-size: 14px;
			flex: 1;
		}
		.ym span {
			padding: 0 12px;
			cursor: pointer;
			&:after {
				content: '';
				display: inline-block;
				width: 8px;
				height: 8px;
				margin: 0px 10px 5px;
				border-top: 1px solid #000;
				border-right: 1px solid #000;
				transform: rotate(135deg);
			}
		}
		.ym a {
			text-decoration: none;
			line-height: 21px;
			color: #333;
			font-weight: bold;
		}
		.pr {
			a {
				background: url('../../image/icon/calendar/icon-prev-month.svg') center center no-repeat;
			}
		}
		.ne {
			a {
				background: url('../../image/icon/calendar/icon-next-month.svg') center center no-repeat;
			}
		}
		.pr a,
		.ne a {
			display: block;
			width: 40px;
			height: 40px;
			background-size: 10px;
		}
		.miscBtn {
			.button;
			margin: 0 10px;
			width: 30px;
			height: 28px;
			color: @btnBgPrimary;
			font-size: @l3;
			text-indent: -10000px;
			background: url('../../image/icon/calendar/icon-add.svg') center center no-repeat;
			background-size: 100%;
		}
	}
	.ympop {
		display: none;
		width: 100%;
		font-size: @l3;
		background-color: #fff;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		&.open {
			display: flex;
			flex-direction: column;
		}
		.ym {
			display: flex;
			flex: 1;
			.mm {
				flex: 1;
			}
			.yy {
				.r-line;
				flex: 1;
			}
		}

		.yt {
			height: 38px;
			position: relative;
		}
		.pr,
		.ne {
			position: absolute;
			top: 14px;
		}
		.pr {
			left: 20px;
		}
		.pr a {
			display: block;
			width: 14px;
			height: 14px;
			border-left: 1px solid #444;
			border-top: 1px solid #444;
			transform: rotate(-45deg);
		}
		.ne {
			right: 10px;
		}
		.ne a {
			display: block;
			width: 14px;
			height: 14px;
			border-right: 1px solid #444;
			border-top: 1px solid #444;
			transform: rotate(45deg);
		}
		ul {
			padding-top: 3px;
		}
		li {
			float: left;
			width: 50%;
			height: 38px;
			padding: 1px 2px;
			list-style: none;
		}
		li a {
			display: block;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-align: center;
			text-decoration: none;
			line-height: 32px;
		}

		.selected a {
			border-radius: 3px;
		}

		.ympop-ft {
			.t-line;
			height: 50px;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.button {
				min-width: 80px;
				height: 32px;
				font-weight: bold;
			}
		}
	}
	.bd {
		font-size: @l4;
		font-weight: bold;
		overflow: hidden;
		width: 100%;

		.slide-wrap {
			display: flex;
			width: 300%;
			padding: 10px 0;
		}
	}
	// input 日期选择框 底部工具栏
	.df {
		display: none;
	}
	tr {
		height: 32px;
		line-height: 32px;
	}
	.di {
		table-layout: fixed;
		border-collapse: collapse;
		border-spacing: 0;
		width: 33.3333%;
		position: relative;
	}
	th {
		width: 14.28%;
		cursor: default;
		color: @infoColor;
		span {
			display: block;
			text-align: center;
			font-weight: bold;
			font-size: @l3;
		}
	}

	td {
		padding: 1px;
		cursor: pointer;
		position: relative;
		a {
			display: block;
			text-align: center;
			line-height: 30px;
			width: 30px;
			border-radius: 50%;
		}

		&.dot {
			&:before {
				content: ' ';
				display: block;
				width: 4px;
				height: 4px;
				border-radius: 50%;
				background-color: red;
				position: absolute;
				bottom: 2px;
				left: 50%;
				margin-left: -2px;
			}
		}
	}

	.selected {
		a,
		a:hover {
			font-weight: bold;
			background-color: @btnBgPrimary;
			color: @btnTxtColorPrimary;
		}
	}
	.inactive a {
		color: #888;
	}

	.disabled a,
	.disabled a:hover {
		color: @btnTxtColorDisabled;
		border: none;
		background: none;
		cursor: default;
	}

	&.view-week {
		.dt {
			.ym span {
				&:after {
					display: none;
				}
			}
		}
	}
}

.tb-line {
	.calendar {
		border: none;
	}
}
